<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"><!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
        <meta name="renderer" content="webkit"><!--国产浏览器高速模式-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>
            花礼网-后台
        </title><!-- 公共样式 开始 -->
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/admin/css/base.css">
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/admin/css/iconfont.css">
        <script type="text/javascript" src="${pageContext.request.contextPath}/admin/framework/jquery-1.11.3.min.js"></script>
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/admin/layui/css/layui.css"><!--[if lt IE 9]>
        <script src="${pageContext.request.contextPath}/admin/framework/html5shiv.min.js"></script>
        <script src="${pageContext.request.contextPath}/admin/framework/respond.min.js"></script>
        <![endif]-->
        <script type="text/javascript" src="${pageContext.request.contextPath}/admin/layui/layui.js"></script><!-- 滚动条插件 -->
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/admin/css/jquery.mCustomScrollbar.css">
        <script src="${pageContext.request.contextPath}/admin/framework/jquery-ui-1.10.4.min.js"></script>
        <script src="${pageContext.request.contextPath}/admin/framework/jquery.mousewheel.min.js"></script>
        <script src="${pageContext.request.contextPath}/admin/framework/jquery.mCustomScrollbar.min.js"></script>
        <script src="${pageContext.request.contextPath}/admin/framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
        <!-- 公共样式 结束 -->
    </head>
    <body>
        <div class="cBody">
            <div class="console">
                <div class="layui-input-inline"><input type="text" name="username" lay-verify="required" placeholder="输入会员名称" autocomplete="off" class="layui-input"></div>
                <span style="margin-left: 50px;margin-right: 30px;">性别</span>
                <input type="radio" name="gender" value="男"> 男&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio"name="gender" value="女"> 女
                <button class="layui-btn" lay-submit="" lay-filter="formDemo" id="search" style="margin-left: 50px;">检索</button>
            </div>
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>邮箱</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>类别</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="data-center">
                </tbody>
            </table><!-- layUI 分页模块 -->
            <div id="pages"></div>
            <script>
                layui.use(['laypage', 'layer'], function() {
                        var laypage = layui.laypage,
                                layer = layui.layer;
                
                        //总页数大于页码总数
                        laypage.render({
                            elem: 'pages'
                            ,count: 100
                            ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                            ,jump: function(obj){
                                console.log(obj)
                            }
                        });
                });
            </script>
        </div>
    </body>
    <script type="text/javascript">
        $(function(){
            loadUser();
        })
        //连接servlet 获取 数据
        function loadUser(){
            $.ajax({
                url:"${pageContext.request.contextPath}/userlist",
                method:"get",
                success:function(data){
                    showMsg(data);
                },
                error:function(XMLHttpRequest,textStatus,errorThrown){
                    alert("失败"+XMLHttpRequest.status+":"+textStatus+":"+errorThrown);
                }
            });
        }
        //显示用户信息
        function showMsg(list){
            var s="";
            var i = 1;
            for(var u in list){
                //声明 tr  td  对象
                s+="<tr><td>"+(i++)+"</td><td>"+list[u].email+"</td><td>"+list[u].username+"</td>" +
                    "<td>"+list[u].gender+"</td><td>"+(list[u].role==0?"管理员":"会员")+"</td>" +
                    "<td><a href='javascript:delUser("+list[u].id+")' class='layui-btn layui-btn-xs'>删除</a></td>" +
                    "</tr>";
            }
            $("#data-center").html(s);
        }
        //删除用户
        function delUser(id){
            if(confirm("确认要删除吗?")){
                $.ajax({
                    url:"${pageContext.request.contextPath}/userdel?id="+id,
                    method:"get",
                    success:function(data){
                        if(data>0){
                            loadUser();
                        }
                    },
                    error:function(XMLHttpRequest,textStatus,errorThrown){
                        alert("失败"+XMLHttpRequest.status+":"+textStatus+":"+errorThrown);
                    }
                })
            }
        }
        //条件查询
        $(function(){
            //给查询按钮 添加 点击事件
            $("#search").click(function(){
                var username = $("input[name='username']").val();
                var genders = $("input[name='gender']");
                var gender = "";
                for(var i=0;i<genders.length;i++){
                    if(genders[i].checked){
                        gender += genders[i].value;
                    }
                }
                if (gender==''){
                    $.ajax({
                        url:"${pageContext.request.contextPath}/usersearchname?username="+username,
                        method:"post",
                        success:function(data){
                            if(data==0){
                                alert("未找到指定内容");
                                $("input[name='username']").val("");
                                $("input[name='gender']").removeAttr("checked");
                                loadUser();
                            }else{
                                showMsg(data);
                            }
                        },
                        error:function(XMLHttpRequest,textStatus,errorThrown){
                            alert("失败"+XMLHttpRequest.status+":"+textStatus+":"+errorThrown);
                        }
                    })
                }else {
                    $.ajax({
                        url:"${pageContext.request.contextPath}/usersearch?username="+username+"&gender="+gender,
                        method:"post",
                        success:function(data){
                            if(data==0){
                                alert("未找到指定内容");
                                $("input[name='username']").val("");
                                $("input[name='gender']").removeAttr("checked");
                                loadUser();
                            }else{
                                showMsg(data);
                            }
                        },
                        error:function(XMLHttpRequest,textStatus,errorThrown){
                            alert("失败"+XMLHttpRequest.status+":"+textStatus+":"+errorThrown);
                        }
                    })
                }
                //使用ajax 进行异步交互

            })
        })
    </script>
</html>